<template>
    <div>
        <div class="clearfix herolist-type">
            <ul class="types-left">
                <li>综合</li>
                <li>定位</li>
            </ul>
            <div class="clearfix types-ms">
                <el-radio-group v-model="radio" @change="radioChangeHandle">
                    <el-radio size="medium" :label="10">本周免费</el-radio>
                    <el-radio size="medium" :label="11">新手推荐</el-radio>
                </el-radio-group>
            </div>

            <div class="clearfix types-ms">
                <el-radio-group v-model="radio" @change="radioChangeHandle">
                    <el-radio size="medium" :label="0">全部</el-radio>
                    <el-radio size="medium" :label="1">战士</el-radio>
                    <el-radio size="medium" :label="2">法师</el-radio>
                    <el-radio size="medium" :label="3">坦克</el-radio>
                    <el-radio size="medium" :label="4">刺客</el-radio>
                    <el-radio size="medium" :label="5">射手</el-radio>
                    <el-radio size="medium" :label="6">辅助</el-radio>
                </el-radio-group>

                <el-input placeholder="请输入你想要搜索的英雄名" v-model="searchContent" clearable>
                </el-input>
            </div>
        </div>
        <div class="herolist-content">
            <ul class="herolist clearfix">
                <li v-for="hero in filterTableData" v-bind:key="hero.ename">
                    <a :href="'#/heroinfo/' + hero.ename">
                        <img
                            :src="'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' + hero.ename + '/' + hero.ename + '.jpg'" />
                        {{ hero.cname }}
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            heroList: "",
            heroTypeList: "",
            radio: 0,
            searchContent: "",
        }
    },
    created() {
        this.query();
    },
    computed: {
        //过滤数据 实现分页和搜索效果
        filterTableData: function () {
            let input = this.searchContent && this.searchContent.toLowerCase();
            let searchItems;
            //搜索 且有结果就返回一个结果数组
            if (input) {
                searchItems = this.heroList.filter(function (item) {
                    return Object.keys(item).some(function () {
                        return String(item['cname'])
                            .toLowerCase()
                            .match(input);
                    });
                });
                searchItems.reverse();
            } else {
                //不搜索 则返回tableTypeData,即对应类型的英雄列表
                searchItems = this.heroTypeList;
            }
            return searchItems;
        }
    },
    methods: {
        query() {
            this.axios.get('http://47.241.102.141:3000/heros')
                .then(response => {
                    // console.log(response.data);
                    this.heroList = response.data.reverse();
                    this.heroTypeList = this.heroList;
                })
                .catch(error => {
                    console.log(error);
                });
        },
        commonContent(radioNum) {
            if (radioNum === 0) {
                this.heroTypeList = this.heroList;
            } else if (radioNum === 10 || radioNum === 11) {
                this.heroTypeList = [];
                for (let i = 0; i < this.heroList.length; i++) {
                    if (this.heroList[i].pay_type == radioNum) {
                        this.heroTypeList.push(this.heroList[i]);
                    }
                }
            }
            else {
                this.heroTypeList = [];
                for (let i = 0; i < this.heroList.length; i++) {
                    if (this.heroList[i].hero_type == radioNum) {
                        this.heroTypeList.push(this.heroList[i]);
                    }
                }
            }
        },
        //如果单选框发生改变 就显示相应类型的英雄
        radioChangeHandle() {
            switch (this.radio) {
                case 0:
                    this.commonContent(0);
                    break;
                case 1:
                    this.commonContent(1);
                    break;
                case 2:
                    this.commonContent(2);
                    break;
                case 3:
                    this.commonContent(3);
                    break;
                case 4:
                    this.commonContent(4);
                    break;
                case 5:
                    this.commonContent(5);
                    break;
                case 6:
                    this.commonContent(6);
                    break;
                case 10:
                    this.commonContent(10);
                    break;
                case 11:
                    this.commonContent(11);
                    break;

            }
        },
        // func(hero) {
        //     this.$router.push({
        //         path:"'/heroinfo/'+ hero.ename"
        //     });
        // }
    },
}
</script>

<style>
body>.el-container {
    margin-bottom: 40px;
    height: 100%;
}

.herolist-type {
    width: 100%;
    height: 106px;
    margin-top: 40px;
    background-color: #EFEFEF;
    border-radius: 5px;
    color: #686869;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: '\20';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;
}


.types-left {
    float: left;
    width: 80px;
    height: 106px;
    text-align: center;
    background-color: #2C88E2;
    color: #fff;
    border-radius: 5px 0 0 5px;
}

.types-left li {
    display: block;
    height: 52px;
    line-height: 52px;
    font-size: 16px;
}

.types-ms {
    display: block;
    position: relative;
    float: left;
    width: 1000px;
    padding: 16px 0;
    height: 20px;
    line-height: 21px;
}

.el-radio {
    float: left;
    padding-left: 10px;
    min-width: 80px;
    font-size: 14px;
    cursor: pointer;
}

.el-input {
    position: absolute;
    width: 220px;
    right: -45px;
    bottom: 6px;
    padding-left: 30px;
}

/*英雄列表模块*/
.herolist-content {
    margin-top: 40px;
}

.herolist-content ul {
    margin-right: -50px;
    overflow: hidden;
}

.herolist-content li {
    float: left;
    width: 87px;
    margin-bottom: 34px;
    margin-right: 30px;
}


.herolist-content a {
    display: block;
    width: 100%;
    text-align: center;
    color: #363636;
}

.herolist-content img {
    display: block;
    width: 83px;
    height: 83px;
    border: 2px solid #258DF2;
    border-radius: 10px 0 10px 0;
}
</style>